<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>乐扣游戏商城</title>
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/ranking.css">

</head>

<body>
  <!-- header模块-->
  <header>
    <div class="header-l">
      <a href="index.html">
        <img src="images/logo.png" alt="">
      </a>
    </div>
    <div class="header-r">
      <ul>
        <li class="first">
          <a href="shopcar.html">购物车</a>
        </li>
        <li>
          <a href="index.html">商店</a>
        </li>
        <li>
          <a href="community.html">社区</a>
        </li>
        <li>
          <a href="javascript:;">客服</a>
        </li>
      </ul>
    </div>
    <div class="header-m">
      <a href="register.html"><button>注 册</button></a>

      <a href="login.html"><button>登 录</button></a>
    </div>
  </header>

  <div class="empty">
  </div>

  <!-- 主体模块 -->
  <div class="main w">
    <div class="main-l">
      <div class="title">
        <h2>最畅销</h2>
        <a href="#">查看更多</a>
      </div>
      <div class="content">
        <ul>
          <li>
            <span>
              <a href="#">
                <img src="update/pai-1.jpg" alt=""> Goat Simulator 3
              </a>
            </span>
          </li>
          <li>
            <span>
              <a href="#">
                <img src="update/pai-2.jpg" alt=""> Sid Meier's Civilization VI
              </a>
            </span>
          </li>
          <li>
            <span>
              <a href="#">
                <img src="update/pai-3.jpg" alt=""> 海贼无双4
              </a>
            </span>
          </li>
          <li>
            <span>
              <a href="#">
                <img src="update/pai-2.jpg" alt=""> Sid Meier's Civilization VI
              </a>
            </span>
          </li>
          <li>
            <span>
              <a href="#">
                <img src="update/pai-1.jpg" alt=""> Goat Simulator 3
              </a>
            </span>
          </li>
        </ul>
      </div>
    </div>
    <div class="main-m">
      <div class="title">
        <h2>最多游玩</h2>
        <a href="#">查看更多</a>
      </div>
      <div class="content">
        <ul>
          <li>
            <span>
              <a href="#">
                <img src="update/pai-1.jpg" alt=""> Goat Simulator 3
              </a>
            </span>
          </li>
          <li>
            <span>
              <a href="#">
                <img src="update/pai-2.jpg" alt=""> Sid Meier's Civilization VI
              </a>
            </span>
          </li>
          <li>
            <span>
              <a href="#">
                <img src="update/pai-3.jpg" alt=""> 海贼无双4
              </a>
            </span>
          </li>
          <li>
            <span>
              <a href="#">
                <img src="update/pai-1.jpg" alt=""> Goat Simulator 3
              </a>
            </span>
          </li>
          <li>
            <span>
              <a href="#">
                <img src="update/pai-2.jpg" alt=""> Sid Meier's Civilization VI
              </a>
            </span>
          </li>
        </ul>
      </div>
    </div>
    <div class="main-r">
      <div class="title">
        <h2>最热门愿望清单游戏</h2>
        <a href="#">查看更多</a>
      </div>
      <div class="content">
        <ul>
          <li>
            <span>
              <a href="#">
                <img src="update/pai-1.jpg" alt=""> Goat Simulator 3
              </a>
            </span>
          </li>
          <li>
            <span>
              <a href="#">
                <img src="update/pai-2.jpg" alt=""> Sid Meier's Civilization VI
              </a>
            </span>
          </li>
          <li>
            <span>
              <a href="#">
                <img src="update/pai-3.jpg" alt=""> 海贼无双4
              </a>
            </span>
          </li>
          <li>
            <span>
              <a href="#">
                <img src="update/pai-1.jpg" alt=""> Goat Simulator 3
              </a>
            </span>
          </li>
          <li>
            <span>
              <a href="#">
                <img src="update/pai-2.jpg" alt=""> Sid Meier's Civilization VI
              </a>
            </span>
          </li>

        </ul>
      </div>
    </div>

  </div>

  <!-- 展示模块 -->
  <div class="show w">

    <div class="show-l">
      <div class="show-l-t">
        当前在线排行榜
      </div>
      <div class="show-l-b">
        456
      </div>
    </div>

    <div class="show-m">
      <div class="show-m-t"> 
        最受期待排行榜
      </div>
      <div class="show-m-b">
        456
      </div>
    </div>

    <div class="show-r">
      <div class="show-r-t">
        商城热销排行榜
      </div>
      <div class="show-r-b">
        456
      </div>
    </div>
  </div>



  <!-- 底部模块 -->
  <footer>
    <div class="mod_copyright">
      <div class="links">
        <a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="#">联系客服</a> | <a href="#">商家入驻</a> | <a href="#">营销中心</a>
        |
        <a href="#">友情链接</a> | <a href="#">销售联盟</a> | <a href="#">游戏社区</a> |<a href="#">爱心公益</a>|
        <a href="#">English Site</a> | <a href="#">Contact U</a>
      </div>
      <div class="copyright">
        地址：嘉应学院江北校区东区学生宿舍 | 电话：13434940752 | 邮箱: 1960144768@qq.com <br>
      </div>
    </div>
  </footer>

  <script src="js/echarts.min.js"></script>
  <script>
    /*柱形图 */
    var myChart = echarts.init(document.querySelector('.show-l-b'));
    option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: ['CS:GO', '刀塔2', '绝地求生', 'Apex英雄', '失落的方舟', '侠盗猎车手5', '军团要塞2','腐蚀','永劫无间','文明6'],
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '在线人数',
          type: 'bar',
          barWidth: '60%',
          data: [820000, 740000, 290000, 230000, 220000, 110000,80000,70000,70000,70000]
        }
      ]
    };
    myChart.setOption(option);

    /* 饼状图 */
    var myChart1 = echarts.init(document.querySelector('.show-m-b'));
    option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '关注人数',
          type: 'pie',
          radius: ['40%','60%'],
          data: [
            { value: 1143000, name: '动物派对' },
            { value: 315000, name: '空洞骑士:丝之歌' },
            { value: 212000, name: '浩劫前夕' },
            { value: 128000, name: '冰气时代2' },
            { value: 123000, name: '霍格沃兹:遗产' },
            { value: 108000, name: '边境' },
            { value: 104000, name: '星空Starfield' },
            { value: 95000, name: '森林之子' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };

    /* 折线图 */
    myChart1.setOption(option);

    var myChart2 = echarts.init(document.querySelector('.show-r-b'));
    option = {
      xAxis: {
        type: 'category',
        data: ['荒野大嫖客:救赎2', '战地风云5', '双人成行', '永劫无间', '赛博朋克2077', '狭盗猎车手5', '战地风云2042']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [10000, 8320, 7901, 6934, 6129, 5330, 4320],
          type: 'line',
          smooth: true
        }
      ]
    };
    myChart2.setOption(option);
  </script>
</body>

</html>